<template>
    <view class="order">
        <view class="fs28 pd20">
            <delivery :address="address" @buyModel="buyModel"></delivery>
        </view>
        <view>
            <goods-list :list="list"></goods-list>
        </view>
        <!-- #ifndef MP-WEIXIN -->
        <view class="payStyle">
            <view class="payBox" v-for="i in payStyle" :class="i.type == payValue ? 'active' : ''" @click="payValue = i.type">
                <u-icon :name="i.icon" size="24" :color="i.color"></u-icon>
                <view class="fs24">{{ i.name }}</view>
            </view>
        </view>
        <!-- #endif -->
        <car-buy payType :payState="payState" @toPay="toPay"></car-buy>
        <!-- 支付插件 -->
        <uni-pay ref="pay" @success="paySuccess" @cancel="payCancel" @create="payCreate"></uni-pay>
    </view>
</template>

<script setup>
import { computed, ref, reactive } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { useCounterStore } from '../../stores/shop/car';
import { brandStore } from '../../stores/shop/brands.js';

const payStyle = [
    {
        name: '支付宝',
        type: 'alipay',
        icon: 'zhifubao',
        color: '#1578ff'
    },
    {
        name: '微信',
        type: 'wxpay',
        icon: 'weixin-fill',
        color: '#04c15f'
    }
];
const payValue = ref('alipay');
// #ifdef MP-WEIXIN
payValue.value = ref('wxpay');
// #endif
//已购商品
const carStore = useCounterStore();
const list = ref([]);
list.value = carStore.cardList;
//获取默认地址
const address = ref({});
const addressObj = uniCloud.importObject('mall-address');
const getAddress = async () => {
    let res = await addressObj.getMoernAddress();
    if (!res.data.length) return;
    address.value = res.data[0];
};
//是否禁用
const payState = computed(() => {
    let bool = Object.keys(address.value).every((key) => {
        return address.value[key] != '';
    });
    if (!ctype.value) bool = true;
    return bool && list.value.length > 0;
});
//支付
const toPay = async () => {
    console.log('发起支付');
    let addMsg = { ...address.value };
    delete addMsg._id;
    let obj = {
        address: addMsg, //地址
        provider: payValue.value, // 支付供应商
        cardList: list.value,
        total_fee: useCounterStore().total, // 支付金额，单位分 100 = 1元
        ctype: ctype.value, //外送方式
        brandId: brandStore().brandId
    };
    let order_no = await orderObj.createOrder(obj);
    let out_trade_no = order_no + '-' + String(Math.random()).substring(3, 9);
    pay.value.createOrder({
        provider: payValue.value, // 支付供应商
        total_fee: useCounterStore().total, // 支付金额，单位分 100 = 1元
        type: 'goods', // 支付回调类型
        order_no: order_no, // 业务系统订单号
        out_trade_no, // 插件支付单号
        description: '小程序支付测试' // 支付描述
    });
};

const pay = ref();
//支付成功
const paySuccess = (e) => {
    console.log(e);
    carStore.cardList = [];
};
//支付取消
const payCancel = (e) => {
    console.log(e);
};
//创建支付订单
const orderObj = uniCloud.importObject('mall-order');
const payCreate = async (e) => {
    console.log(e);
};
//快递模式
const ctype = ref('外送');
const buyModel = (e) => {
    ctype.value = e ? '外送' : '自提';
};
onLoad(() => {
    uni.$on('setAddress', (e) => {
        if (!e) return;
        address.value = e;
        console.log(address.value);
    });
    getAddress();
});
onUnload(() => {
    uni.$off('setAddress');
});
</script>

<style lang="scss" scoped>
.order {
    padding: 10rpx;
}

.payStyle {
    @include flex-box();
    padding: 20rpx;

    .payBox {
        width: 45%;
        @include flex-box-set();
        border-radius: 10rpx;
        padding: 8rpx 0;
        border: 1px solid #fff;
        filter: grayscale(100%);
        background-color: #fff;

        &:first-child.active {
            border: 1px solid #1578ff;
            color: #1578ff;
            filter: grayscale(0);
        }

        &:last-child.active {
            color: #04c15f;
            border: 1px solid #04c15f;
            filter: grayscale(0);
        }
    }
}
</style>
